<template>
	<view class="content">
		<view class="UCenter-bg" :style="{'background-color' : colors}">
			<view @click="wxlogin()">
				<image class="png" mode="widthFix"
					:src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/images/users.png'"></image>
				<view class="margin-top-sm nick_name">
					<text>{{userInfo.nickName ? userInfo.nickName : '点击登录' }}</text>
				</view>
			</view>
			<image class="gif-wave"
				src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bac0ea58-fde2-44b8-9fbd-e07bb8738606/14843b8d-6ccc-45e8-b58b-03534ec660b0.gif">
			</image>

		</view>

		<view class="grace-body" v-if="userInfo.nickName">
			<view class="grace-grids-items" v-for="(item,index) in otherInfo" :key="index" @click="toPage(item.url)">
				<view class="midIcon">
					<u-icon :name="item.icon" :color="colors" size="60"></u-icon>
				</view>
				<text class="grace-grids-text">{{item.name}}</text>
			</view>
		</view>


		<view class="botInfo">
			<button class="setItem" v-for="(item, index) in navs" :open-type="item.open_type" :key="index"
				@click="toPage(item.url)">
				<view class="setIcon">
					<view class="t-icon set-t-icon" :class="item.icon"></view>
				</view>
				<view class="setInfo">
					<text class="setName">{{ item.name }}</text>
				</view>
				<text class="iconfont icon-dayuhao icon2"></text>
			</button>
		</view>
	</view>
</template>

<script>
	import * as cloudApi from '@/utils/cloudApi.js'
	import {
		getBookList,
		getNavList
	} from './otherInfo.js';
	export default {
		data() {
			return {
				userInfo: {
					nickName: '',
					avatarUrl: ''
				},
				otherInfo: getBookList(),
				navs: getNavList(),
				colors: null,
				token: null
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.colors
			})
		},
		onLoad() {
			this.refreshToken()
			this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
			this.token = uni.getStorageSync("token") || getApp().globalData.token
			this.colors = this.userInfo.themeColors || '#F3C301'
			uni.$on('refresh', () => {
				this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
				this.token = uni.getStorageSync("token") || getApp().globalData.token
				this.colors = this.userInfo.themeColors || '#F3C301'
			});

		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
			this.token = uni.getStorageSync("token") || getApp().globalData.token
			this.colors = this.userInfo.themeColors || '#F3C301'
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.colors
			})
		},
		methods: {
			toPage(url) {
				if (!this.token) return
				uni.navigateTo({
					url
				})
			},
			refreshToken() { //  刷新token
				console.log('刷新');
				uni.login({
					provider: 'weixin',
					success: (res) => {
						var code = res.code
						cloudApi.call({
							name: "login",
							data: {
								code,
								token: this.token,
								api: 'refresToken',
							},
							success: (res) => {
								console.log(res);
								if (!res.result) return
								this.$setGlobalCache(res.result.token, "token")
								this.token = res.result.token
							},
						})
					}
				})
			},
			async wxlogin() {
				if (this.userInfo.nickName) return
				uni.login({
					provider: 'weixin',
					success: (res) => {
						var code = res.code
						cloudApi.call({ // 使用封装好的 
							name: "login",
							data: {
								code,
							},
							success: (res) => {
								console.log(res.result, '8');
								this.userInfo = res.result
								this.token = res.result.token
								this.$setGlobalCache(this.userInfo, "userInfo")
								this.$setGlobalCache(this.userInfo.token, "token")
								this.$showToast('登录成功', 'none')
							},
							fail: err => {
								this.$showToast('登录失败，稍后再试', 'none')
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.grace-body {
		width: 750rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;

	}

	.UCenter-bg {
		background-size: cover;
		height: 395rpx;
		display: flex;
		justify-content: center;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg image.png {
		border-radius: 50%;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 9;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.margin-top-sm {
		text-align: center;
	}

	.grace-grids-items {
		margin: 50rpx 0rpx 0rpx 50rpx;
		display: flex;
		flex-direction: column;

		.midIcon {
			color: #0da408;
			font-size: 60rpx;
			text-align: center;
		}
	}

	.grace-grids-items .grace-grids-text {
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.nick_name {
		font-size: 32rpx;
	}

	.botInfo {
		background-color: #fff;
		border-radius: 0rpx 0 30rpx 30rpx;
		padding: 30rpx 20rpx;

		button::after {
			border: none;
		}

		button {
			background-color: #fff;
			border-radius: 0;
		}

		.setItem {
			position: relative;
			// 纵向排列
			display: flex;
			margin-bottom: 50rpx;
			height: 80rpx;
			line-height: 60rpx;
			color: #686868;

			.setIcon {
				display: flex;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				// border-radius: 50%;
				text-align: center;

				.set-t-icon {
					width: 45rpx;
					height: 45rpx;
				}
			}

			.setInfo {
				display: flex;
				// 改变flex布局 纵向排列
				flex-direction: column;
				margin-left: 20rpx;

				.setName {
					font-size: 35rpx;
				}
			}

			.icon2 {
				position: absolute;
				right: 15rpx;
				color: #ccc;
				font-size: 40rpx;
			}
		}
	}
</style>
